$breakpoints: ('portrait': 'screen and (orientation:portrait)', 'landscape': 'screen and (orientation:landscape)', 'iphone5': 'only screen and ( max-width: 350px)', 'xs': 'only screen and ( max-width: 479px)', 'sm': 'only screen and ( max-width: 767px)', 'max839': 'only screen and ( max-width: 839px)', 'md': 'only screen and ( max-width: 991px)', 'max1100': 'only screen and ( max-width: 1100px)', 'lg': 'only screen and ( max-width: 1199px)', 'max1365': 'only screen and ( max-width: 1365px)', 'max1366': 'only screen and ( max-width: 1366px)', 'max1439': 'only screen and ( max-width: 1439px)', 'max1440': 'only screen and ( max-width: 1440px)', 'max1580': 'only screen and ( max-width: 1580px)', 'max1799': 'only screen and ( max-width: 1799px)', 'minsm': 'only screen and ( min-width: 768px)', 'xsh': 'only screen and ( max-height: 479px)', 'iphoneXL': 'only screen and (min-width: 812px) and (orientation: landscape)', ) !default;

@mixin respond-to($breakpoint) {
    $query: map-get($breakpoints, $breakpoint);

    @if not $query {
        @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
    }

    @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
        @content;
    }
}

// @include respond-to(sm) {}

.transition-03 {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

$main-color:#eee; //主体色